<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="copyright" content="All Rights Reserved, Copyright (C) 2013, Wuyeguo, Ltd." />
<title>EasyUI Web Admin Power by Wuyeguo</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="../css/wu.css" />
<link rel="stylesheet" type="text/css" href="../css/icon.css" />
<script type="text/javascript" src="../jquery.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script type="text/javascript" src="../locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="../js/jquery.serializejson.min.js"></script>

</head>
<body>
    <div id="user-toolbar">
        <div class="wu-toolbar-button">
            <a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="openUserAdd()" plain="true">添加</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-remove" onclick="removeUser()" plain="true">选中删除</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-reload" onclick="reload()" plain="true">刷新</a>
        </div>        
    </div>

    <table id="user-datagrid"></table>



    <div id="user-dialog" class="easyui-dialog" data-options="closed:true,iconCls:'icon-save'" style="width:400px; padding:10px;">
    	 <form id="user-form" class="easyui-form" method="post" data-options="novalidate:true">
    	    <div style="margin-bottom:20px">
    	        <input class="easyui-textbox" name="name" style="width:100%" data-options="label:'用户名:',required:true">
    	    </div>
    	    <div style="margin-bottom:20px">
    	       <input class="easyui-textbox" name="password" style="width:100%" data-options="label:'密码:',required:true" >
    	    </div>
    	    
    	</form>
    </div>


    <script>
    	
        $('#user-datagrid').datagrid({
            url:'http://localhost:3000/users/list',
            fit:true,
            pageSize:2,
            pageList:[2,4,6,8,10],
            pagination:true,
            toolbar:'#user-toolbar',
            columns:[[
            	{field:'check',title:'check',width:100,checkbox:true},
                {field:'name',title:'Name',width:100},
                {field:'password',title:'Password',width:100},
                {field:'operate',title:'管理', width:150,
        			formatter: function(value,row,index){
        				//console.log(row);
        				return '<a href="javascript:void(0)" class="editcls" onclick="editUser(\''+ row._id+'\')">修改</a> '+                        
        				'<a href="javascript:void(0)" class="removecls" onclick="deleUser(\''+ row._id+'\')">删除</a>'
        			}
        		}                
            ]],
            onLoadSuccess:function(data){  
                $('.editcls').linkbutton({text:'修改',plain:true,iconCls:'icon-edit'}); 
                $('.removecls').linkbutton({text:'删除',plain:true,iconCls:'icon-remove'});
            }
        });

        function openUserAdd(){
        	$('#user-form').form('clear');
        	$("#user-dialog").dialog({
        		closed: false,
        		modal:true,
                title: "添加信息",
                buttons: [{
                    text: '确定',
                    iconCls: 'icon-ok',
                    handler: userAddAction
                }, {
                    text: '取消',
                    iconCls: 'icon-cancel',
                    handler: function () {
                        $('#user-dialog').dialog('close');                    
                    }
                }]
            });
        }


        function userAddAction(){
        	$('#user-form').form('submit',{
                onSubmit:function(){
                    if ($(this).form('enableValidation').form('validate')){
        				$.ajax({
        					type:"post",
        					url:"http://localhost:3000/users/data",
        					data:$("#user-form").serializeJSON()
        				}).then(function(res){
        					console.log(res)
        					$('#user-datagrid').datagrid('reload');					
        				});
                    }else{
                    	alert('no')
                    }
                    $('#user-dialog').dialog('close');
        			$('#user-datagrid').datagrid('reload');
                }
            });
        }


        var nodeId=null;        

        function editUser(id){//修改            
        	var obj = $('#user-datagrid').datagrid('getSelected');           
            if(obj){
                nodeId = obj._id;
            }else{
                nodeId = id;
            }   

        	$('#user-form').form('clear');
            
        	$("#user-dialog").dialog({
        		closed: false,
        		modal:true,
                title: "添加信息", 
                onOpen:function(){
                    $('#user-form').form('load',obj);
                },
                buttons: [{
                    text: '确定',
                    iconCls: 'icon-ok',
                    handler: userEditAction
                }, {
                    text: '取消',
                    iconCls: 'icon-cancel',
                    handler: function () {
                        $('#user-dialog').dialog('close');                    
                    }
                }]
            });
            
        }


        function userEditAction(){
        	$('#user-form').form('submit',{
                onSubmit:function(){
                    if ($(this).form('enableValidation').form('validate')){
                    	console.log(nodeId);
        				$.ajax({
        					type:"post",
        					url:"http://localhost:3000/users/data/"+nodeId,
        					data:$("#user-form").serializeJSON()
        				}).then(function(res){
        					console.log(res);
        				});
                    }else{
                    	alert('no');
                    }
                    $('#user-dialog').dialog('close');
        			$('#user-datagrid').datagrid('reload');
                }
            });
        }

        function deleUser(id){
        	$.ajax({
        		type:"delete",
        		url:"http://localhost:3000/users/data/"+ id
        	}).then(function(res){		
        		$('#user-datagrid').datagrid('reload');
        	});
        }
        
        //删除选中
        function removeUser(id){            
            var objs = $('#user-datagrid').datagrid('getSelections');
            //console.log(objs);
            for(var i = 0;i<objs.length;i++){
                deleUser(objs[i]._id);
            }
        }

        //刷新
        function reload(){
            $('#user-datagrid').datagrid('reload');
        }
    </script>
</body>
</html>